<template>
  <r-pop
    title="编写技能特长"
    width="500px"
    height="150px"
    class="edit"
    @confirm="onSave"
    v-bind="$attrs"
  >
    <div class="edit__input">
      <input v-model="inputVal" placeholder="自定义技能" />
      <r-button @click="addLabel(inputVal)" size="small">添加</r-button>
    </div>
    <div class="align-left">根据您的职业推荐的技能</div>
    <div class="edit__list">
      <div
        class="edit__list__item"
        :key="index"
        :class="{ 'edit__list__item--activated': isActivated(item) }"
        @click="addLabel(item)"
        v-for="(item, index) in labels"
      >
        {{ item }}
      </div>
    </div>
    <div class="align-left">已经添加的技能</div>
    <div class="edit__item" :key="item.id" v-for="(item, index) in baseItems">
      <div class="edit__item__left">
        <i class="resume resume-del" @click="delItem(index)" />
        <span class="edit__item__left--name">{{ item.name }}</span>
      </div>
      <r-slider class="edit__item__right" v-model="item.value" />
    </div>
  </r-pop>
</template>

<script>
import cloneDeep from "lodash/cloneDeep";
import RPop from "@/components/base/RPop";
import { ref } from "vue";
import RButton from "@/components/base/RButton";
import RSlider from "@/components/base/RSlider";
import labels from "./label";
export default {
  name: "edit",
  components: { RSlider, RButton, RPop },
  props: {
    originData: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, ctx) {
    const baseItems = ref(cloneDeep(props.originData));
    const inputVal = ref("");

    const addLabel = (label) => {
      if (
        label &&
        baseItems.value.findIndex((item) => item.name === label) === -1
      ) {
        baseItems.value.push({ id: Date.now(), name: label, value: "66.67" });
      }
    };

    const isActivated = (label) =>
      baseItems.value.find((i) => i.name === label);
    const delItem = (index) => baseItems.value.splice(index, 1);
    const onSave = () => ctx.emit("save", baseItems.value);
    return {
      labels,
      inputVal,
      baseItems,
      addLabel,
      isActivated,
      delItem,
      onSave,
    };
  },
};
</script>

<style scoped lang="less">
.align-left {
  text-align: left;
}
.edit__label {
  height: 20px;
  margin-right: 15px;
  margin-bottom: 10px;
  border: lightgrey 1px solid;
  border-radius: 10px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.edit {
  &__input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    input {
      margin-right: 5px;
      flex: 1;
    }
  }

  &__list {
    width: 100%;
    box-sizing: border-box;
    height: 200px;
    border: lightgrey solid 1px;
    margin-top: 5px;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    overflow-y: auto;

    &__item {
      .edit__label();
      &--activated {
        background: lightskyblue;
        color: white;
      }
    }
  }

  &__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;

    &__left {
      display: flex;
      flex-direction: row;
      align-items: center;
      i {
        font-size: 15px;
        cursor: pointer;
      }
      &--name {
        .edit__label();
        margin: 0 10px;
      }
    }
    &__right {
      width: 279px;
    }
  }
}
</style>
